<template>
  <div id='coinmanage'>
      <com-head :opacity='0'>金币管理</com-head>
      <div class="navimg"  @click="shownav"><img class="img" src="../assets/image/navall.png"></div>
      <div class="balance">
          <p>金币余额</p>
          <p>{{balance}}</p>
      </div>
      <div class="transfer">
          <router-link class="box" tag="div" :to="'turnout'">
              <div class="img"><img src="../assets/image/zhuanzhang.png"></div>
              <p>金币转账</p>
          </router-link>
          <router-link class="box" tag="div" to="recharge">
              <div class="img"><img src="../assets/image/chongzhi.png"></div>
              <p>金币充值</p>
          </router-link>
      </div>
      <div class="coinlog">
        <p class="coindetail">金币明细</p> 
        <div class="notice" v-for="item in notice" :key="item.id">
            <div class="left">
                <p>{{item.content}}</p>
                <p>{{item.create_time}}</p>
            </div>
            <div class="right">{{item.num}}</div>
        </div>
      </div>
      
  </div>
</template>

<script>
export default {
  name: "coinmanage",
  data() {
    return {
      balance: "",
      notice: [
        // {
        //   content: "转账-某某你",
        //   time: "2018-11-08",
        //   money: "-50"
        // },
        // {
        //   content: "充值",
        //   time: "2018-11-08",
        //   money: "+50"
        // }
      ]
    };
  },

  computed: {},

  created() {},

  mounted() {
    this.loading();
  },

  methods: {
    loading(){
      this.axios.post("apiindex/moneylog", {
          token: this.token(),
        })
        .then(({ data }) => {
          
          if (data.code === "200") {
            this.balance = data.data.regcur;
            this.notice = data.data.log;
            this.$bus.$emit("toast", data.data);            
          } else if (data.code === "204") {
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
      shownav() {
      this.$bus.$emit("navlist");
    }
  }
};
</script>
<style lang='scss'>
#coinmanage {
    .icon-fanhui1 {
     display: none;
    }
  .navimg {
    width: 140px;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    img {
      display: block;
      margin-left: 42px;
      margin-top: 25px;
      width: 43px;
      height: 33px;
    }
  }
  .balance {
    margin: 30px auto;
    padding: 60px 0;
    box-sizing: border-box;
    width: 686px;
    height: 260px;
    background: url(../assets/image/iconbg.png) no-repeat;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    p:nth-of-type(1) {
      font-size: 28px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 60px;
    }
    p:nth-of-type(2) {
      font-size: 56px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      line-height: 80px;
    }
  }
  .transfer {
    margin: 0 32px;
    display: flex;
    justify-content: space-between;
    .box {
      width: 334px;
      height: 192px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      text-align: center;
      .img {
        margin: 30px auto 0;
        width: 80px;
        height: 80px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p:nth-of-type(1) {
        font-size: 30px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(0, 140, 215, 1);
        line-height: 60px;
      }
    }
    .box:nth-of-type(2) p {
      color: #db0000;
    }
  }
  .coinlog {
    padding: 0 32px;
    box-sizing: border-box;
    .coindetail {
      margin-top: 20px;
      font-size: 32px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      line-height: 80px;
    }
    .notice {
      height: 128px;
      border-bottom: 1Px solid #eee;
      display: flex;
      justify-content: space-between;
      // align-items: center;
      .left {
        width: 534px;
        p:nth-of-type(1) {
          padding-top: 15px;
          font-size: 30px;
          color: #000;
          line-height: 50px;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p:nth-of-type(2) {
          font-size: 26px;
          color: #999;
          line-height: 40px;
        }
      }
      .right {
        padding-top: 15px;
        font-size: 40px;
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        font-family: PingFangSC-Medium;
      }
      .active {
        color: #ec0202;
      }
    }
  }
}
</style>